<template>
    <div>
        <div class="add">
            <div></div>
            <el-button class="add-button" type="text" @click="add">增加</el-button>
        </div>
        <!-- 表格 -->
        <div class="tab">
            <el-table :data="list" style="width: 100%; border-radius: 5px;">
                <el-table-column prop="show_time" :label="PorgranList.time" />
                <el-table-column prop="title" :label="PorgranList.title" />
                <el-table-column prop="brief" :label="PorgranList.brief" />
                <el-table-column :label="PorgranList.img">
                    <template slot-scope="scope">
                        <img @click="dialogVisibles = true, bigimg = scope.row.img" :src="scope.row.img"
                            style="width: 100px; height: 100px; " alt="">
                    </template>
                </el-table-column>
                <el-table-column width="180">
                    <template slot-scope="scope">
                        <el-button type="text" @click="updata(scope.row.id)"
                            style=" font-size: 16px; padding: 10px 20px;border-radius: 0; background: #08cfde;color: #000000;">编辑</el-button>
                        <el-button type="text" @click="del(scope.row.id)"
                            style="font-size: 16px; padding: 10px 20px; border-radius: 0; border: 1px solid #666; background: #fff;color: #666; font-size: 16px;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="example-pagination-block">
            <div class="example-demonstration">
            </div>
            <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 30, 40]" :total="tableData.length"
                :page-size="page.pagesize" @current-change="changepage" @size-change="changesize" />
        </div>
        <!-- 放大图片的dialog -->
        <el-dialog class="dialog" :visible.sync="dialogVisibles" width="50%">
            <img :src="bigimg" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { updateFile } from '@/api/status'
import { getNewsList, delNews } from '@/api/News'

export default {
    data() {
        return {
            PorgranList: {
                title: "标题",
                time: "时间",
                img: "图片",
                brief: "概要"
            },
            page: {
                //分页
                page: 1,
                pagesize: 10
            },
            tableData: [],
            list: [],//table中的数据
            dialogVisible: false,//对话框是否显示
            dialogVisibles: false,//图片显示区域的dialog
            bigimg: '',//放大后的图片
            data: {
                title: "",
                content: "",
                img: "",
                id: ""
            },
            id: 0
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            getNewsList().then((res) => {
                // console.log(res);
                this.tableData = res.data.data.list
                this.list = this.tableData.slice((this.page.page - 1) * this.page.pagesize, (this.page.page - 1) * this.page.pagesize + this.page.pagesize)
            }).catch(() => {
                this.$message({
                    message: '网络不给力呦',
                    type: 'warning'
                });
            })

        },
        changepage(e) {
            this.page.page = e,
                this.getList()
        },
        changesize(e) {
            this.page.pagesize = e,
                this.getList()
        },
        add() {
            // 添加数据
            this.$store.state.flag = false
        },
        del(id) {
            // 删除数据
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delNews(id).then(() => {
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        updata(id) {
            // 编辑数据
            this.$store.state.flag = false
            this.$store.state.newsid = id
            // console.log(this.$store.state.newsid);
        },
        handleClose(done) {
            this.$confirm('确认关闭？').then(() => {
                done();
            }).catch(() => { });
        },
        // 上传文件
        uploadImage() {
            const input = document.getElementById('imageUploadInput');
            input.click(); // 触发文件上传输入框的点击事件
        },
        handleFileSelect(event) {
            const file = event.target.files[0] // 获取用户选择的文件

            if (file) {
                const formData = new FormData();
                formData.append('token', this.$store.state.token)
                formData.append('file', file);
                updateFile(formData).then(res => {
                    this.data.img = res.data.data
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
                // 发送上传请求给服务器...
            }
        }
    }
}
</script>
<style scoped lang="less">
.add {
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .add-button {
        font-size: 16px;
        color: #000000;
        position: absolute;
        top: 70px;
        right: 30px;
        z-index: 1;
        background-color: #08cfde;
        border: none;
        border-radius: 0;
        // padding: 0 10px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

img {
    cursor: pointer;
}

.example-pagination-block {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    .example-demonstration {
        line-height: 32px;
    }
}

.tab {
    margin: 10px;
    padding: 10px;
    background-color: #fff;
}

.dialog {
    img {
        width: 100%;
    }
}
</style>